<template>
	<view class="content">
		<view class="group">
			<image src="https://ccmao-b2c.oss-cn-shenzhen.aliyuncs.com/seckill.jpg" mode="aspectFill"></image>
		</view>
		<view class="goods-list">
			<view v-for="(item, index) in secKillProductList" :key="index" class="goods-item">
				<view class="product-image-wrapper" @click="navToDetailPage(item)">
					<image class="product-image" v-if="item.productDTO.productMainImage" :src="item.productDTO.productMainImage.url" mode="aspectFill"></image>
					<image class="image-tag" src="/static/image/seckill-price.png" mode="aspectFit"></image>
				</view>
				<view class="title">
					<span class="clamp">{{item.productDTO.productName}}</span>
					<view class="countdown">
						<uni-countdown @timeup="item.endFlag = true" class="countdown"  :show-day="false" :day="item.secKillCountDown.days" :hour="item.secKillCountDown.hours" :minute="item.secKillCountDown.minutes"
					 :second="item.secKillCountDown.seconds" color="#FFFFFF" background-color="#333333" />
					 </view>
				</view>
				<view class="desc">
					<span class="left">限购{{item.limitedUnit}}份</span>
					<!-- <span class="middle" v-if="item.productDTO.soldUnit  > item.productDTO.totalUnit">即将抢光(仅剩{{item.productDTO.totalUnit}}份)</span>
					<span class="middle" v-else>{{item.productDTO.totalUnit}}份可售</span>
					<span class="right">{{item.productDTO.soldUnit}}人已购</span> -->
					<span class="middle">{{item.productDTO.soldUnit}}人已购</span>
				</view>
				<view class="price-box">
					<text class="price">{{item.unitPrice}}</text>
					<text class="list-price">{{item.productDTO.unitPriceStandard}}</text>
					<span class="button-base" @click="clickAddToCart(item)" v-if="!item.endFlag && item.cartNum==0">立即秒杀</span>
					<uni-number-box class="step" v-if="!item.endFlag && item.cartNum>0" :min="0" :max="item.limitedUnit" v-model="item.cartNum"
					 :isMax="item.cartNum>=item.limitedUnit?true:false" :isMin="item.cartNum===0" :index="index" :autoRefresh="!item.productDTO.skuEnabled" @eventAdd="numberChange" @eventMinus="numberChange"></uni-number-box>
					 
					<span class="button-base disabled" v-if="item.endFlag">已结束</span>
				</view>
			</view>
		</view>
		<cashier></cashier>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
	import uniNumberBox from '@/components/uni-number-box.vue'
	import cashier from "@/components/cashier.vue"
	export default {
		components: {
			uniNumberBox,
			uniLoadMore,
			uniCountdown,
			cashier
		},
		data() {
			return {
				secKills:[],
				secKillProductList:[]
			};
		},
		computed:{
			...mapState(['hasLogin', 'hasMerchant', 'userInfo', 'merchantInfo','cartInfo','footPrint', 'applicationConfig']),
		},
		onLoad(options){
			this.inquirySecKill();
		},
		methods: {
			...mapMutations(['updateCartInfo']),
			clickAddToCart(item){
				item.cartNum = 1;
				this.addProductToCart(item);
			},
			addProductToCart(item) {
				let that = this;
				let postData = {
					unit: item.cartNum,
					unitPrice: item.unitPrice,
					priceTag: '秒杀价',
					userDTO: {
						userUuid: this.userInfo.userUuid
					}
				}
				postData.productDTO = {
					productUuid: item.productDTO.productUuid
				}
				this.$api.request.addCart(postData, res => {
					if (res.body.status.statusCode === '0') {
						this.syncUserCart(function(){
							console.log('Sync user shopping cart completed');
						});
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				},false);
			},
			//修改购买商品数量
			numberChange(e) {
				this.secKillProductList[e.index].cartNum = e.number;
				//单规格直接添加到购物车或者从购物车移除
				if(e.number==0)
					this.removeProductFromCart(this.secKillProductList[e.index]);
				else
					this.addProductToCart(this.secKillProductList[e.index]);
			},
			//将单规格商品从购物车移除
			removeProductFromCart(item) {
				/* 先找到对应的购物车Item Id */
				let shoppingCartUuid = null;
				this.cartInfo.forEach(function(cart, index){
					if(item.productUuid = cart.productDTO.productUuid){
						shoppingCartUuid = cart.shoppingCartUuid;
					}
				})
				//调用后台移除
				if(shoppingCartUuid){
					let postData = {
						shoppingCartUuid: shoppingCartUuid
					}
					this.$api.request.removeCart(postData, res => {
						if (res.body.status.statusCode === '0') {
							this.syncUserCart(function(){
								
							});
						} else {
							console.log(res.body.status.errorDesc);
						}
					},true);
				}
			},
			//同步购物车数据到本地
			syncUserCart(callback) {
				if(this.hasLogin){
					let postData = {
						userUuid: this.userInfo.userUuid
					}
					this.$api.request.cartList(postData, res => {
						if (res.body.status.statusCode === '0') {
							let cartList = res.body.data.carts;
							this.updateCartInfo(cartList);
							if(callback) callback();
						} else {
							console.log(res.body.status.errorDesc);
						}
					},false);
				}
			},
			//详情页
			navToDetailPage(item) {
				let id = item.productDTO.productUuid;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				})
			},
			//秒杀商品
			inquirySecKill() {
				let that = this;
				this.$api.request.secKill({
			
				}, res => {
					if (res.body.status.statusCode === '0') {
						this.secKills = res.body.data.secKills;
						var secKillProductList = [];
						res.body.data.secKills.forEach(function(val,index){
							//计算倒计时数据
							var diff = that.$api.util.getCountDownTimes(val.endTime);
							var secKillCountDown = {
								days: diff[0],
								hours: diff[1],
								minutes: diff[2],
								seconds: diff[3]
							}
							val.secKillCountDown = secKillCountDown;
							var endTimeStr = val.endTime;
							var endTime = new Date(Date.parse(endTimeStr.replace(/-/g, "/")));
							//循环取出每一个秒杀活动的商品列表
							var list = val.secKillProductList;
							list.forEach(function(secKillProduct,pIndex){
								secKillProduct.secKillCountDown = secKillCountDown;
								secKillProduct.name = val.name;
								secKillProduct.startTime = val.startTime;
								secKillProduct.endTime = val.endTime;
								//计算该商品在购物车中的数量
								var cartNum = that.$api.util.singleProdCartNum(secKillProduct.productDTO,that.cartInfo);
								that.$set(secKillProduct,'cartNum',cartNum);
								// secKillProduct.cartNum = cartNum;
								secKillProductList.push(secKillProduct);
							})
						})
						this.secKillProductList = secKillProductList;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
	}

	.group{
		height: 240px;
		image{
			width: 100%;
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 商品列表 */
	.goods-list{
		position: absolute;
		top:200px;
		left:0;
		right:0;
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx 140upx 0;
		background: linear-gradient(to bottom, #ffffff 0%,#f8f8f8 100%);
		border-radius: 20upx;
		.header{
			width: 100%;
			text-align: center;
			padding: 20upx 0;
			font-size: $font-lg;
			font-color: $font-color-dark;
			image{
				vertical-align: middle;
				height: 60upx;
				width:60upx;
			}
			text{
				padding-left:10upx
			}
		}
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 100%;
			padding: 20upx;
			background-color: #fff;
			margin: 10upx 0;
			border-radius: 20upx;
			.title{
				font-size: $font-base;
				color: $font-color-dark;
				line-height: 80upx;
				display: flex;
				align-items: flex-end;
				.clamp{
					    margin-right: auto;
				}
			}
			.desc{
				color: $font-color-light;
				font-size: $font-base;
				display:flex;
				padding: 10upx;
				.left{
					width: 20%;
				}
				.middle{
					background: $base-color;
					border-radius: 20px;
					width: 80%;
					text-align: center;
					color: #fff;
					padding: 4upx 0;
					opacity: 0.5;
					margin-left: auto;
					margin-right: auto;
				}
				.right{
					
				}
			}
			.price-box{
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				padding: 10upx 10upx 10upx 0;
				font-size: 24upx;
				color: $font-color-light;
				.action{
					background-color: $base-color;
					border-radius: 10upx;
					box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
					color: #fff;
					padding: 10upx;
					font-size: $font-base;
				}
				.end{
					background-color: #D6D6D6;
					border-radius: 10upx;
					color: #fff;
					padding: 10upx;
					font-size: $font-base;
				}
			}
			.price{
				font-size: $font-lg;
				color: $uni-color-primary;
				line-height: 1;
				&:before{
					content: '￥';
					font-size: 26upx;
				}
			}
			.list-price{
				margin-right:auto;
				&:before {
					content: '￥';
				}
			}
		}
		.product-image-wrapper{
			position:relative;
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			.product-image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
			.image-tag{
				width:120upx;
				height:60upx;
			}
		}
		
	}
	.button-base{
		&.disabled{
			opacity: 0.5;
		}
	}
	

</style>
